<!DOCTYPE html>
<html>
<head>
    <title>Drag and Drop to iframe</title>
    <script type="text/javascript" src="{{ asset('js/jquery-3.7.1.min.js')}}"></script>
    <style>
        .drag-element {
            width: 100px;
            height: 100px;
            background-color: red;
            cursor: move;
        }

        iframe {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div class="drag-element"></div>
<iframe></iframe>

<script>
    $(document).on('mousedown', '.drag-element', function(e) {
        var startX = e.pageX;
        var startY = e.pageY;

        varclone = (this).clone().css({
            position: 'absolute',
            top: startY,
            left: startX
        }).appendTo('body');
        $(document).on('mousemove', function(e) {
            clone.css({
                top: e.pageY,
                left: e.pageX
            });

            var iframeOffset =('iframe').offset();
            var iframeWidth = ('iframe').width();
            var iframeHeight =('iframe').height();

            if (e.pageX > iframeOffset.left &&
                e.pageX < iframeOffset.left + iframeWidth &&
                e.pageY > iframeOffset.top &&
                e.pageY < iframeOffset.top + iframeHeight) {
                clone.appendTo(('iframe').contents().find('body'));
            }
        });

        $(document).on('mouseup', function() {clone.remove();
        });
    });
</script>
</body>
</html>
